
//滑动特效图片切换
$(document).ready(function(){
	var qihua=function(select_b,slider,picshow_img,picshow){
	$(select_b).find('li').first();
	if ($(slider).length) {
		zSlider();
	}
	function zSlider(ID, delay){
		var ID=ID?ID:slider;
		var delay=delay?delay:5000;
		var currentEQ=0, picnum=$(picshow_img).find('li').size(), autoScrollFUN;
		$(select_b).find('li').eq(currentEQ).addClass('current');
		$(picshow_img).find('li').eq(currentEQ).show();
		autoScrollFUN=setTimeout(autoScroll, delay);
		function autoScroll(){
			clearTimeout(autoScrollFUN);
			currentEQ++;
			if (currentEQ>picnum-1) currentEQ=0;
			$(select_b).find('li').removeClass('current');
			$(picshow_img).find('li').hide();
			$(select_b).find('li').eq(currentEQ).addClass('current');
			$(picshow_img).find('li').eq(currentEQ).show();
			autoScrollFUN = setTimeout(autoScroll, delay);
		}
		$(picshow).hover(function(){
			clearTimeout(autoScrollFUN);
		}, function(){
			autoScrollFUN = setTimeout(autoScroll, delay);
		});
		$(select_b).find('li').hover(function(){
			var picEQ=$(select_b).find('li').index($(this));
			if (picEQ==currentEQ) return false;
			currentEQ = picEQ;
			$(select_b).find('li').removeClass('current');
			$(picshow_img).find('li').hide();
			$(select_b).find('li').eq(currentEQ).addClass('current');
			$(picshow_img).find('li').eq(currentEQ).show();
			return false;
		});
	};
	}
	
	//调用
	qihua('#select_btn1','#zSlider1','#picshow_img1','#picshow1');
	qihua('#select_btn2','#zSlider2','#picshow_img2','#picshow2');

})

//选项卡带延迟效果切换
$(function(){
	var tabs=function(tab_tit,tab_con){
		$(tab_con).find('.tab_cont').first().show();
		$(tab_tit).find('li').first().addClass('active');

		$(tab_tit).find('li').hover(function(){
			var index_active=$(tab_tit).find('li').index(this);
			function way(){
				$(tab_tit).find('li').removeClass("active").eq(index_active).addClass("active");
				$(tab_con).find('.tab_cont').eq(index_active).fadeIn(500).siblings().hide();	
			}
			timer=setTimeout(way,500);
			},function(){
				clearTimeout(timer);
			})
		};
		
		//调用
		tabs('#tab_1','#con_1');
		tabs('#tab_2','#con_2');
		tabs('#tab_3','#con_3');
})

//焦点图切换
$(function(){
	var qiehua=function(function_id){
	var sWidth=$(function_id).width(); //获取焦点图的宽度（显示面积）
	var len=$(function_id).find('li').length; //获取焦点图个数
	var index=0;
	var picTimer;
	
	//以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮
	var btn="<div class='btnBg'></div><div class='btn'>";
		for( var i=0; i<len; i++){
			btn+="<span></span>"
		}
	btn+="</div><div class='preNext pre'></div><div class='preNext next'></div>";
	$(function_id).append(btn);
	$(function_id).find(".btnBg").css("opacity",0.5);
		
	//为小按钮添加鼠标滑入事件，以显示相应的内容
	$(function_id).find('.btn span').css('opacity',0.4).mouseenter(function(){
		index=$(function_id).find('.btn span').index(this);
		showPics(index);
	}).eq(0).trigger('mouseenter');
		
	//上一页、下一页按钮透明度处理
	$(function_id).find(".preNext").css("opacity",0.2).hover(function() {
		$(this).stop(true,false).animate({"opacity":"0.5"},300);
	},function() {
		$(this).stop(true,false).animate({"opacity":"0.2"},300);
	});
		
	//上一页按钮	
	$(function_id).find('.pre').click(function(){
		index -=1;
		if(index==-1){index=len-1};
		showPics(index);
	})
				
	//下一页按钮		
	$(function_id).find('.next').click(function(){
		index +=1;
		if(index==len){index=0};
		showPics(index);
	})
	
	//左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度			
	$(function_id).find('ul').css('width',sWidth*(len));
	
	//显示图片函数，根据接收的index值显示相应的内容
	function showPics(index){//普通切换
		var nowLeft=-index*sWidth; //根据index值计算ul元素的left值
		$(function_id).find('ul').stop().animate({'left':nowLeft},300); //通过animate()调整ul元素滚动到计算出的position
		$(function_id).find('.btn span').removeClass('on').eq(index).addClass('on'); //为当前的按钮切换到选中的效果
		$(function_id).find('li p').stop(true,false).animate({bottom:-50},100).eq(index).stop(true,false).animate({bottom:0},100)
		$(function_id).find('.btn span').stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300); //为当前的按钮切换到选中的效果
		};
		
	//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
	$(function_id).hover(function(){
		clearInterval(picTimer);
		},function(){
			picTimer=setInterval(function(){
				showPics(index);
				index++;
				if(index==len){index=0}
				},3000)
		}).trigger('mouseleave');
	}
	
	//调用
	qiehua('#focus1');
	qiehua('#focus2');
	
})